import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat, getStartOfDay, getEndOfDay, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Col, Row, DatePicker, Select} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";
import {getLatestTime} from "@/services/indicator";

const {Option} = Select;


const {RangePicker} = DatePicker;

class QinShiStatus extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba'];

  nameDict = {
    "高度11700": "A",
    "高度10200": "B",
    "高度9200": "C",
    "高度8700": "D",
    "高度8200": "E",
    "高度7700": "F",
    "高度7200": "G",
    "外圈": "H",
    "中圈": "I",
    "内圈": "J",
  }

  directionDict = {
    "0-90": '90',
    "90-180": '180',
    "180-270": '270',
    "270=360": '360'
  }


  state = {
    start: time.minusDay(time.getStartOfDay(), 20),
    end: time.getStartOfDay(),
    name: "内圈",
    direction: "90",
    option: {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        max: value => {
          return value.max
        },
        min: value => {
          return value.min
        },
        type: 'category',
        data: [],
        axisLabel: {
          interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
          rotate: 25   //调整数值改变倾斜的幅度（范围-90到90）
        }
      },
      yAxis: {
        type: 'value',
        max: function (value) {
          return value.max + 10;
        },
        min: function (value) {
          return value.min - 10;
        }
      },
      series: [{
        data: [],
        type: 'line'
      }]
    }
  };


  async componentDidMount() {

    const payload = await getMockTime("GaoLu")

    const {dispatch} = this.props;
    const {name} = this.state;

    const start = time.minusDay(payload.start, 20)
    const end = payload.end

    this.setState({
      start
      ,end
    })



    dispatch({
      type: 'lugang/getQinshiHistory',
      payload: {
        start: dateFormat(start),
        end: dateFormat(end),
        name:this.nameDict[name]
      }
    });
    // const {hasParent = false} = this.props;

    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById("qinShiHistory"));
    // 绘制图表
    this.state.chart.setOption(this.state.option);
    addResizeHook(this, this.state.chart.resize)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {qinshiHistory} = nextProps;
    const {option, chart} = prevState;

    // 当传入的type发生变化的时候，更新state
    if (chart && qinshiHistory && qinshiHistory !== prevState.qinshiHistory) {
      option.xAxis.data = qinshiHistory.date;
      option.series[0].data = qinshiHistory.value;
      chart.setOption(option, true);
      return {qinshiHistory}
    }

    return null;
  }

  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  timePick = value => {
    this.state.selectedTime = value.toDate();
    this.props.dispatch({
      type: 'lugang/getRadarDataOut',
      payload: {
        time: dateFormat(this.state.selectedTime)
      }
    })
  }

  getData = () => {
    const {dispatch} = this.props;
    const {start, end, name} = this.state;

    dispatch({
      type: 'lugang/getQinshiHistory',
      payload: {
        start: dateFormat(start),
        end: dateFormat(end),
        name: this.nameDict[name]
      }
    });
  }

  timePick = value => {
    this.state.start = value[0].toDate();
    this.state.end = value[1].toDate();

    this.getData();
  };

  render() {
    const {width = 100, height = 350} = this.props;
    const {start, end} = this.state;
    return (
      <div>
        <RangePicker
          key={Math.random()} //强制刷新组件
          style={{width: 400}}
          showTime={{format: 'YYYY-MM-DD'}}
          format="YYYY-MM-DD HH"
          placeholder={['开始时间', '结束时间']}
          onOk={this.timePick}
          defaultValue={[moment(start, "YYYY-MM-DD"), moment(end, "YYYY-MM-DD")]}
        />
        <Select defaultValue={this.state.name} placeholder="请选择" style={{width: 120, marginLeft: 10}}
                onSelect={name => {
                  this.setState({name});
                  this.getData();
                }}
        >
          {
            Object.keys(this.nameDict).map(key => <Option value={key}>{key}</Option>)
          }
        </Select>

        <Select defaultValue={this.state.direction} placeholder="请选择" style={{width: 70, marginLeft: 10}}
                onSelect={direction => {
                  this.setState({direction})
                  this.getData();
                }}
        >
          {
            Object.entries(this.directionDict).map(([k, v]) => <Option value={v}>{k}</Option>)
          }
        </Select>


        <div id="qinShiHistory" style={{width: `${width}%`, height}}/>
      </div>

    )
  }
}

export default connect(({lugang, global}) => ({
  qinshiHistory: lugang.qinshiHistory,
  global
}))
(QinShiStatus);
